<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>南京中医药大学准考证</title>
    <style>
        body {
            margin: 0;
            font: normal 14px/1.2 "Microsoft YaHei", sans-serif;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        :focus {
            outline: none;
        }

        .paper {
            margin: 0 auto;
            height: 1122px;
            box-sizing: border-box;
            padding: 20px 40px;
            position: relative;
            background-color: white;
            page-break-after: always;
        }

        .header {
            height: 40px;
            box-sizing: border-box;
            border-bottom: 3px double #000;
            position: relative;
        }

        .header-left {
            height: 100%;
        }

        .header-left>span {
            font-size: 16px;
            line-height: 36px;
            display: inline-block;
            font-weight: bold;
            vertical-align: middle;
        }

        .header-left>img {
            height: 100%;
            vertical-align: middle;
            margin-right: 10px;
        }

        .header-right {
            position: absolute;
            right: -5px;
            top: -23px;
            height: 48px;
            width: 120px;
            text-align: right;
            line-height: 60px;
        }

        .header-right>canvas {
            height: 100%;
            width: 100%;
            vertical-align: middle;
        }

        .footer {
            height: 30px;
            box-sizing: border-box;
            border-top: 3px double #000;
            /* position: absolute; */
            bottom: 10px;
            left: 40px;
            right: 40px;
            text-align: right;
            margin-top: 12px;
        }

        .footer>span {
            display: inline-block;
            line-height: 28px;
            vertical-align: middle;
            margin-left: 20px;
        }

        .water-print {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .water-print>img {
            flex: 0 50%;
            width: 50%;
            transform: rotate(-45deg);
            opacity: 0.1;
        }

        .title {
            height: 36px;
            line-height: 36px;
            font-size: 16px;
            letter-spacing: 3px;
            text-align: center;
            margin: 10px 0 0;
        }

        .info {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .info th,
        .info td {
            height: 20px;
            border: 1px solid #ccc;
            padding: 2px 6px;
            word-wrap: break-word;
            word-break: normal;
        }

        .info th {
            text-align: left;
            background-color: #e5e5e5;
        }

        .info-2 {
            width: 860px;
            transform: scale(0.83);
            transform-origin: 0 0;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .info-2 th,
        .info-2 td {
            height: 20px;
            border: 1px solid #ccc;
            padding: 2px 6px;
        }

        .info-2 th {
            text-align: left;
            background-color: #e5e5e5;
        }

        .btn {
            position: fixed;
            top: 70px;
            right: 40px;
            z-index: 999;
        }

        .btn button {
            padding: 0 15px;
            height: 32px;
            box-sizing: border-box;
            line-height: 30px;
            border-radius: 3px;
            font-size: 12px;
            cursor: pointer;
        }

        .cancel-btn {
            margin-left: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .print-btn {
            border: none;
            margin-left: 10px;
            background-color: #409EFF;
            color: #fff
        }

        @media print {
            .no-print {
                display: none;
            }
        }

        .small-title {
            margin: 10px 0 0;
            line-height: 30px;
            font-size: 12px;
        }

        .more-info p {
            line-height: 1.5;
            margin: 0;
        }

        .hide {
            display: none;
        }

        .right {
            text-align: right;
            padding-right: 20px;
        }

        .spac {
            display: flex;
            justify-content: space-around;

        }
    </style>
</head>

<body>
    <div class="paper" id="printView" style="width: 210mm;height: 297mm;">
        <header class="header">
            <div class="header-left">
            </div>
            <div class="header-right">
            </div>
        </header>
        <main class="content">
            <div style="overflow: auto;">
                <h1 class="title" style="font-weight: bold;">准考证</h1>
                <h3 class="title">2024年中医医师规范化培训结业实践技能考核</h3>
                <h3 class="title">({{base}}考点)</h3>
                <table class="info">
                    <colgroup>
                        <col width="18%">
                        <col width="32%">
                        <col width="18%">
                        <col width="32%">
                    </colgroup>
                    <tr>
                        <th>姓名</th>
                        <td>{{name}}</td>
                        <th>身份证号</th>
                        <td>{{cert}}</td>
                    </tr>
                    <tr>
                        <th>性别</th>
                        <td>{{sex}}</td>
                        <th>报考专业</th>
                        <td>{{cls}}</td>
                    </tr>
                    <tr>
                        <th>准考证号</th>
                        <td colspan="3">{{code}}</td>
                    </tr>
                    <tr>
                        <th>考试地点</th>
                        <td colspan="3">南京中医药大学汉中门校区8号楼技能实训中心</td>
                    </tr>
                    <tr>
                        <th>考试时间</th>
                        <td colspan="3">{{time}}</td>
                    </tr>
                    <tr>
                        <th>考生须知</th>
                        <td colspan="3">
                            <br>
                            <br>
                            <p>1.考生需同时持<strong>准考证、身份证</strong>。</p>
                            <p>2.考生需自备<strong>工作服、口罩、帽子、听诊器、签字笔</strong>。</p>
                            <p>3.考生需严格按照准考证上集合的时间到达考场。</p>
                            <p>4.禁止携带各类通讯工具或者电子设备等与考试无关的物品进入考场。</p>
                            <p>5.考生入场后应严格服从监考人员管理，考完规定内容后签字确认，待监考人员许可后方能离场。</p>
                            <br>
                            <br>
                        </td>
                    </tr>
                </table>
            </div>
        </main>
        <footer class="footer">
        </footer>
        <div class="btn no-print" id="btns">
            <button class="cancel-btn" onclick="cancelPrint()">关闭</button>
            <button class="print-btn" onclick="savePDF()">保存</button>
            <button class="print-btn" onclick="window.print()">打印</button>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <!-- <script src="../lib/jquery-3.3.1.min.js"></script> -->
     <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <!-- <script src="../lib/vue.js"></script> -->
    <script>
        const printInfo = window.parent.printInfo
        const vueObj = window.parent.vueObj

        function savePDF() {
            $("#btns").hide()
            html2canvas(document.getElementById("printView")).then((canvas) => {
            var contentWidth = canvas.width;   
            var contentHeight = canvas.height;
            // 创建jsPDF对象	
            const pdf = new window.jsPDF('1', 'pt', [contentWidth, contentHeight]); //创建一个新的PDF对象，参数包括页面格式（'1'表示A4纸张）、单位（'pt'）和页面尺寸（[contentWidth, contentHeight]）
            var pageData = canvas.toDataURL('image/jpeg', 1.0);  //将Canvas对象转换为JPEG格式的数据，并将其存储在pageData变量中。1.0表示图片质量
            pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);  //将JPEG格式的图片添加到PDF文件中，图片的左上角坐标为(0, 0)，宽度为contentWidth，高度为contentHeight
            pdf.save(printInfo.name+"2024年中医医师规范化培训结业实践技能考核-准考证"+new Date().getTime()+".pdf");
            $("#btns").show()
        });
        }

        function cancelPrint() {
            vueObj.modal.print = false
        }
        
        // var vue = new Vue({
        //     el: "#printView",
        //     data: printInfo
        // })
    </script>
</body>

</html>